<script setup lang="ts">
import { ref, defineEmits, computed, watch, onMounted } from 'vue';
import { useBooleanStore } from '@/store';
import { searchMsAoMachInfo } from '@/api/sorting-matching';

const emit = defineEmits(['updateArray']);
const booleanStore = useBooleanStore();
const hStyle = ref({
  'background-color': booleanStore.color,
  'border-radius': booleanStore.borderRadius,
});
// 表单查询数据
const aoCode = ref('');
const packageCode = ref('');
const itemCode = ref('');
const productCode = ref('');

const batchNo = ref('');
const startPlaneNo = ref('');
const isSort = ref('');
const state = ref('');

const deliveryState = ref('');
const weekStartTime = ref('');
const weekEndTime = ref('');
const dailyStartTime = ref('');

const dailyEndTime = ref('');
const isDownDaily = ref('');
const isDownWeek = ref('');
const station = ref('');

const pageSize = ref<number>(30);
const pageNumber = ref<number>(1);

// 发送搜索数据
const flowQueryData = ref({
  searchParams: computed(() => ({
    aoCode: aoCode.value,
    packageCode: packageCode.value,
    itemCode: itemCode.value,
    productCode: productCode.value,
    batchNo: batchNo.value,
    startPlaneNo: startPlaneNo.value,
    isSort: isSort.value,
    state: state.value,
    deliveryState: deliveryState.value,
    weekStartTime: weekStartTime.value,
    weekEndTime: weekEndTime.value,
    dailyStartTime: dailyStartTime.value,
    dailyEndTime: dailyEndTime.value,
    isDownDaily: isDownDaily.value,
    isDownWeek: isDownWeek.value,
    station: station.value,
    monthStartTime: '',
    monthEndTime: '',
  })),
  pageParameter: computed(() => ({
    rows: pageSize.value,
    page: pageNumber.value,
  })),
});
// 表格数据

async function handleSearch() {
  const newData = await searchMsAoMachInfo(flowQueryData.value);
  emit('updateArray', newData);
}

// 重置
function reset() {
  aoCode.value = '';
  packageCode.value = '';
  itemCode.value = '';
  productCode.value = '';
  batchNo.value = '';
  startPlaneNo.value = '';
  isSort.value = '';
  state.value = '';
  deliveryState.value = '';
  weekStartTime.value = '';
  weekEndTime.value = '';
  dailyStartTime.value = '';
  dailyEndTime.value = '';
  isDownDaily.value = '';
  isDownWeek.value = '';
  station.value = '';
  handleSearch();
}

onMounted(() => {
  handleSearch();
});
// 监听分页
watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
  if (booleanStore.num5 === 14) {
    pageNumber.value = booleanStore.pageNum;
    pageSize.value = booleanStore.pageSize;
    handleSearch();
  }
});
watch(
  () => booleanStore.update,
  () => {
    if (booleanStore.num6 === 8) handleSearch();
  }
);
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">查询条件</div>
    </template>
    <!-- 第一行 -->
    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div>
          <a-input
            v-model="aoCode"
            placeholder="AO编码"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-input
            v-model="packageCode"
            placeholder="工作包编码"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-input
            v-model="itemCode"
            placeholder="图号"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-input
            v-model="productCode"
            placeholder="机型"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
    </a-row>
    <!-- 第二行 -->
    <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div>
          <a-input
            v-model="batchNo"
            placeholder="批次"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-input
            v-model="startPlaneNo"
            placeholder="起始架次"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-select
            v-model="isSort"
            placeholder="是否分拣"
            size="large"
            allow-clear
          >
            <a-option value="Y">已分拣</a-option>
            <a-option value="N">未分拣</a-option>
          </a-select>
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-select
            v-model="state"
            placeholder="配套状态"
            size="large"
            allow-clear
          >
            <a-option value="00">未配套</a-option>
            <a-option value="02">已配套</a-option>
            <a-option value="04">部分配套</a-option>
            <a-option value="01">无库存</a-option>
          </a-select>
        </div>
      </a-col>
    </a-row>
    <!-- 第三行 -->
    <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div>
          <a-select
            v-model="deliveryState"
            placeholder="配送状态"
            size="large"
            allow-clear
          >
            <a-option value="00">未配送</a-option>
            <a-option value="02">已配送</a-option>
            <a-option value="04">已移交</a-option>
            <a-option value="06">已接收</a-option>
          </a-select>
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-date-picker
            v-model="weekStartTime"
            style="width: 100%"
            placeholder="周计划开始时间"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-date-picker
            v-model="weekEndTime"
            style="width: 100%"
            placeholder="周计划结束时间"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-date-picker
            v-model="dailyStartTime"
            style="width: 100%"
            placeholder="日计划开始时间"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
    </a-row>
    <!-- 第四行 -->
    <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div>
          <a-date-picker
            v-model="dailyEndTime"
            style="width: 100%"
            placeholder="日计划结束时间"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-select
            v-model="isDownDaily"
            placeholder="是否下发日计划"
            size="large"
            allow-clear
          >
            <a-option value="Y">已下发</a-option>
            <a-option value="N">未下发</a-option>
          </a-select>
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-select
            v-model="isDownWeek"
            placeholder="是否下发周计划"
            size="large"
            allow-clear
          >
            <a-option value="Y">已下发</a-option>
            <a-option value="N">未下发</a-option>
          </a-select>
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-input
            v-model="station"
            placeholder="站位"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
    </a-row>
    <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="12">
        <a-button type="primary" size="large" @click="handleSearch"
          >查询</a-button
        >
        <a-button class="btn-reset" size="large" @click="reset"
          >重置搜索框</a-button
        >
        <!-- <a-button
          type="primary"
          class="btn-reset"
          size="large"
          @click="booleanStore.toggleBool(0.1)"
          >新增</a-button
        > -->
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped>
.margin-top {
  margin-top: 10px;
}
.btn-group {
  float: right;
  margin-top: 15px;
}

.btn-reset {
  margin-left: 10px;
}
.font {
  font-size: 20px;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.div-tips {
  align-items: center;
  text-align: center;
  color: #999;
}
</style>
